<template>
    <div class="tmpl">
        <nav-bar title='图文详情' />
        <div class="photo">
            <h3>{{photoTitle.title}}</h3>
            <div class="photo-title">
                <p>{{photoTitle.add_time | convertTime('YYYY-MM-DD')}}</p>
                <p>{{photoTitle.click}}次浏览</p>
                <p>分类：民生</p>
            </div>
        </div>
        <ul class="imgs">
            <vue-preview  :slides="imgs" @close="handleClose"></vue-preview>
        </ul>
        <!-- 使用品论组件 -->
        <common :cid='$route.query.id' />
    </div>
</template>
<script>
    export default {
        name: 'photo-details',
        data () {
            return {
                photoTitle: '',
                imgs: []
            }
        },
        created () {
            console.log(this.$route.query.id);
            let newid = this.$route.query.id;
            this.getPhotoDetailsData(newid);
            this.getPhotoImages(newid);
        },
        methods: {
            getPhotoDetailsData (newid) {
                this.$axios.get(process.env.API_HOST + 'getimageinfo/' + newid)
                .then( res => {
                    this.photoTitle = res.data.message[0]
                })
                .catch( err => console.log(err))
            },
            getPhotoImages (newid) {
                this.$axios.get(process.env.API_HOST + 'getthumimages/' + newid)
                .then(res => {
                    this.imgs = res.data.message
                    this.imgs.forEach(function(val,index){
                        val.msrc = val.src;
                        val.w = 600;
                        val.h = 400;
                    })
                })
                .catch(err => console.log(err))
            },
            handleClose () {
                console.log('close event')
            }
        }
    }
</script>
<style scoped="">
    .tmpl{
        padding-bottom: 55px;
    }
    .photo h3{
        font-size: 20px;
        color: greenyellow;
        padding: 10px 0;
        text-align: center;
    }
    .photo-title {
        width: 100%;
        display: flex;
        justify-content: space-between;
    }
    .photo-title p{
        font-size: 12px;
        color: #ccc;
    }
    .imgs li{
        padding-bottom: 10px;
    }
    .imgs /deep/ div figure a img{
        width: 100%;
    }
    .pswp--supports-fs .pswp__button--fs {
        display: none;
    }
</style>